<template>


<div class="tag-pane">
  <div class="icon-tag" 
    style="margin-bottom:.05rem"
    v-for="item in list" 
    :key="item.id" 
    @click="toggle(item.id,item.checked)"
  >
    <van-icon v-if="item.checked" name="success" class="selected-icon"/>
    <slot v-else-if="useSlot"></slot>
    <span v-else class="icon-text" :style="'border-color:#'+item.icon_color+';' ">{{item.icon_name}}</span>
    <span style="margin-left:4px">{{item.name || item.text}}</span>
  </div>
</div>

  
</template>
<script>
export default {
 
  props:{
    list:Array,
    useSlot:{
      type: Boolean,
      default: false
    }
  },
  methods:{
    toggle(id, checked){
      this.$emit('onCheck', id, !checked)
    }
  }
}
</script>
<style lang='scss' scoped>
@import '../../../styles/var.scss';
.tag-pane{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  .icon-tag{
  display: flex;
  align-items: center;
  font-size: .12rem;
  height: .32rem;
  border: 1px solid #eee;
  border-radius: 5%;
  width: 30%;
  padding-left: .08rem;
  .selected-icon{
    color: $primary
  }
  .icon-text{
    padding: 2px 3px;
    border-radius: 10%;
    border: 1px solid red;
  }
  
}
}

</style>